<template>
  <div class="main">
    <img class="pdfItem" v-for="(item, index) in imgurls" :key="index" :src="item" alt="" />
    <div class="alert" v-if="isios">IOS不支持直接下载，请点击按钮复制链接后在默认浏览器中打开</div>
    <div class="fixedDownload" v-if="pdfurl" @click="downloadPdf">{{ isIos() ? '复制链接' : '点击下载' }}</div>
  </div>
</template>

<script>
import { exportPDF } from "@/api/detail/detail.js";
export default {
  data() {
    return {
      query: {},
      imgurls: [],
      pdfurl: "",
      isios: false
    };
  },
  onLoad(options) {
    this.query = JSON.parse(options.query);
    this.init(this.query);
    this.isios = this.isIos();
  },
  onShow() {},
  onPullDownRefresh() {},
  onReachBottom() {},
  methods: {
    isIos() {
      let u = navigator.userAgent;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

      if (isIOS) {
        return true;
      } else {
        return false;
      }
    },
    async init(query) {
      const { data } = await exportPDF(query);
      this.imgurls = data.imgurls;
      this.pdfurl = data.pdfurl.includes('https') ? data.pdfurl : data.pdfurl.replace('http', 'https');
    },
    downloadPdf() {
      if (this.isios) {
        uni.setClipboardData({
			    data: this.pdfurl,
			    success: function () {
            uni.showToast({
              title: '复制成功，请在外部浏览器手动粘贴访问和下载',
              icon: 'none'
            })
			    },
			    fail:function () {
            uni.showToast({
                title: '复制失败',
                icon: 'none'
            });
			    }
        });
      } else {
        const winRef = window.open("about:blank", "_blank");
        winRef.location = this.pdfurl;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 99vh;
  .pdfItem {
    width: 100%;
  }
  .alert {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: 600;
    color: #cccccc;
  }
  .fixedDownload {
    background-color: #1677ff;
    color: #ffffff;
    border-radius: 8rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 32rpx;
    box-sizing: border-box;
    &:active {
      background-color: #449efb;
    }
  }
}
</style>
